<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <title>有线电视续费</title>
    <link rel="stylesheet" href="../css/layout.css" />
    <link rel="stylesheet" href="../css/common.css" />
  </head>
  <body>
    <div id="app">
      <div class="home_container"></div>
      <!-- 头部 -->
      <header class="header">
        <div class="navigation">
          <a href="index.html">
            <img id="nav-back" src="../images/xy/back-icon.png" />
          </a>
        </div>
        <div class="logo">
          <div class="logo-text">有线电视续费</div>
        </div>
      </header>
      <!-- 用户信息 -->
      <div class="user-info">
        <span class="title">用户信息</span>
        <ul class="info-form">
          <li>
            <span>卡号</span>
            <input type="number" placeholder="请输入卡号" v-model="cardNum" />
          </li>
          <li>
            <span>手机号</span>
            <input
              type="number"
              placeholder="请输入手机号"
              v-model="phoneNum"
            />
          </li>
          <li>
            <span>验证码</span>
            <input
              type="number"
              placeholder="请输入验证码"
              v-model="verificationCode"
            />
            <div class="getCode">获取验证码</div>
          </li>
        </ul>
      </div>
      <!-- 缴费年限 -->
      <div class="payment-period">
        <span class="title">缴费年限</span>
        <div class="payment-form">
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
            "
          >
            <div
              v-for="(item,index) in list"
              class="payment-form-item"
              :class="currentCard == index?'activePayment':''"
              @click="getCurrent(index)"
            >
              <span class="item-name">{{item.name}}</span>
              <span>
                ￥<span class="item-price">{{item.price}}</span>/{{item.year}}年
              </span>
            </div>
          </div>
          <div class="payment-btn" @click="pay">缴 费</div>
        </div>
      </div>
    </div>
    <script src="../js/normal.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue_resource.js"></script>
  </body>
  <script>
    new Vue({
      el: "#app", //el用于指定当前Vue实例为哪个容器服务，值通常为选择器字符串。
      data: function () {
        return {
          currentCard: 0,
          cardNum: null,
          phoneNum: null,
          verificationCode: null,
          list: [
            {
              name: "有线电视",
              price: "252",
              year: 1,
            },
            {
              name: "有线电视",
              price: "456",
              year: 2,
            },
            {
              name: "有线电视+宽带",
              price: "498",
              year: 1,
            },
            {
              name: "有线电视+宽带",
              price: "948",
              year: 2,
            },
          ],
        };
      },
      methods: {
        // 缴费事件
        pay() {},
        // 卡片切换
        getCurrent(index) {
          this.currentCard = index;
        },
      },
    });
  </script>
</html>
